<script lang="ts">
export default {
  name: "devicewarn",
};
</script>

<script setup lang="ts">
import {
  getDeviceWarnPage,
  setDeviceWarn,
  getDeviceWarnForm,
} from "@/api/device/warnSetting";
import { getDeviceList } from "@/api/device/log";

import {
  DeviceWarnPageVO,
  DeviceWarnForm,
  DeviceWarnQuery,
} from "@/api/device/warnSettingTypes";
import { DeviceListVO } from "@/api/device/logtypes";

const queryFormRef = ref(ElForm);
const deviceFormRef = ref(ElForm);

const loading = ref(false);
const total = ref(0);

const queryParams = reactive<DeviceWarnQuery>({
  pageNum: 1,
  pageSize: 10,
});

const dialog = reactive<DialogOption>({
  visible: false,
});

const deviceWarnList = ref<DeviceWarnPageVO[]>();

const deviceList = ref<DeviceListVO[]>();

const formData = reactive<DeviceWarnForm>({
  id: undefined,
  deviceId: undefined,
  downValue: undefined,
  upValue: undefined,
  type: "",
  noticeMsg: true,
	level:"",
  warnGap: 2,
});

/**
 * 查询设备
 */
function getDevice() {
  loading.value = true;
  getDeviceList()
    .then(({ data }) => {
      deviceList.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 查询设备预警设置数据
 */
function handleQuery() {
  loading.value = true;
  getDeviceWarnPage(queryParams)
    .then(({ data }) => {
      deviceWarnList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

const rules = reactive({
  deviceId: [{ required: true, message: "请选择设备名称", trigger: "change" }],
  type: [
    { required: true, message: "请选择设备数据类型名称", trigger: "change" },
  ],
  downValue: [
    { required: true, message: "请选输入预警值下限", trigger: "blur" },
  ],
  upValue: [{ required: true, message: "请选输入预警值上限", trigger: "blur" }],
});

/**
 * 设备表单提交
 */
function handleSubmit() {
  loading.value = true;
  deviceFormRef.value.validate((valid: any) => {
    if (valid) {
      const deviceId = formData.id;
      if (deviceId) {
        setDeviceWarn(formData)
          .then(() => {
            ElMessage.success("修改成功");
            closeDialog();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        setDeviceWarn(formData)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialog();
            resetQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}
/**
 * 关闭弹窗
 */
function closeDialog() {
  dialog.visible = false;
  resetForm();
}
/**
 * 重置表单
 */
function resetForm() {
  deviceFormRef.value.resetFields();
  deviceFormRef.value.clearValidate();

  formData.deviceId = undefined;
}
/**
 * 打开设备预警表单弹窗
 *
 * @param deviceId
 */
function openDialog(deviceId?: number) {
  dialog.visible = true;
  if (deviceId) {
    dialog.title = "修改设备预警值";
    getDeviceWarnForm(deviceId).then(({ data }) => {
      Object.assign(formData, data);
    });
  } else {
    dialog.title = "新增设备预警值";
  }
}

onMounted(() => {
  getDevice();
  handleQuery();
});
</script>

<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="设备名称：">
          <el-select
            v-model="queryParams.deviceId"
            placeholder="请选择设备名称"
            prop="deviceId"
          >
            <el-option
              v-for="item in deviceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <el-button type="success" @click="openDialog()">
          <i-ep-plus />
          新增
        </el-button>
      </template>

      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="deviceWarnList"
        highlight-current-row
        border
      >
        <el-table-column label="设备名称" prop="deviceName" />
        <el-table-column label="设备类型" prop="type" />
				<el-table-column label="风险级别" prop="levelStr" />
        <el-table-column label="数据预警" prop="data">
          <template #default="scope">
            {{ scope.row.downValue }} <span> - </span> {{ scope.row.upValue }}
          </template>
        </el-table-column>
        <el-table-column label="是否短信通知">
          <template #default="scope">
            {{ scope.row.noticeMsg ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="短信告警间隔(单位小时)" prop="noticeGap" />
        <el-table-column label="操作" fixed="right" width="220">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click="openDialog(scope.row.id)"
              ><i-ep-edit />编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <!-- 设备预警设置表单弹窗 -->

    <el-dialog
      :title="dialog.title"
      v-model="dialog.visible"
      width="500px"
      @close="closeDialog"
    >
      <el-form
        ref="deviceFormRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="设备名称：" prop="deviceId">
          <el-select v-model="formData.deviceId" placeholder="请选择设备名称">
            <el-option
              v-for="item in deviceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型：" prop="type">
          <el-select v-model="formData.type" placeholder="请选择数据类型：">
            <el-option label="pm" value="PM">pm</el-option>
            <el-option label="液位" value="YW">液位</el-option>
            <el-option label="温度" value="TEMP">温度</el-option>
						<el-option label="电量" value="DL">电量</el-option>
						<el-option label="信号强度" value="SIGNAL">信号强度</el-option>
          </el-select>
        </el-form-item>

				<el-form-item label="风险级别：" prop="level">
					<el-select v-model="formData.level" placeholder="请选择风险级别：">
						<el-option label="高" value="3">高</el-option>
						<el-option label="中" value="2">中</el-option>
						<el-option label="低" value="1">低</el-option>
					</el-select>
				</el-form-item>
        <el-form-item label="预警值：" prop="downValue">
          <div style="display: inline-block">
            <el-input
              type="number"
              v-model="formData.downValue"
              placeholder="请输入预警值下限"
              style="display: inline-block; width: 160px"
            />
            <span style="display: inline-block; padding: 0 5px">- </span>
            <el-input
              type="number"
              v-model="formData.upValue"
              placeholder="请输入预警值上限"
              style="display: inline-block; width: 160px"
            />
          </div>
        </el-form-item>
        <el-form-item label="是否短信通知：" prop="noticeMsg">
          <el-switch
            v-model="formData.noticeMsg"
            active-color="#13ce66"
          ></el-switch>
        </el-form-item>
        <el-form-item label="通知间隔(小时)：" prop="warnGap">
          <el-input v-model="formData.warnGap" placeholder="请输入通知间隔" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
